@charset "utf-8";
/* 清除网站默认样式 */
html,body,div,h1,h2,h3,h4,h5,h6,ul,ol,dl,li,dt,dd,p,blockquote,pre,form,fieldset,table,th,td {margin: 0px;padding:0px;line-height: normal;font-family:"Microsoft YaHei",Verdana, Geneva, sans-serif;border: 0; outline:none; }
a{outline:none; text-decoration: none;}
a:hover { outline:none; text-decoration: none !important;}
.kj { width: 100%; height: 100%; margin: 0 auto; position: relative; background: #fff; overflow: hidden;}
html { height: 100%; overflow: hidden;}
body { height: 100%; overflow: hidden;}
ul, ol, li {list-style: none outside none;}


html { min-width: 1200px; }

.TA { transition: all 0.5s; }
@keyframes breath {
    from {
        background: rgba(255, 0, 0, 0);
        box-shadow:inset 0px 0px 2px #f00;
    }
    to {
        box-shadow:inset 0px 0px 10px #f00;
        background: rgba(255, 0, 0, 0.2);
    }
}

.table { width: 1000px; position: relative; margin: 100px auto 20px auto; height: 400px; border-radius: 200px; overflow: hidden; background: rgb(122, 45, 9);/* transform: perspective(500px) rotatex(50deg) rotatey(0deg);*/}
/* 分界线 */
.limit { border: 1px solid #ccc; height: 1px;width: 100%; top: 50%; position: absolute; }
.healths { width: 150px; height: 20px; position: absolute; left: 40px; border: 1px solid #ccc; background: #000;border-radius: 3px;  }
.health { width: 80%; height: 20px; background: rgb(206, 22, 22); background-image: url('../img/health.png');border-radius: 2px; }
.hurt { width: 60%; box-shadow: inset 0px 0px 15px #f00; height: 20px; position: absolute; top: 0px; left: 0px;border-radius: 2px; animation-name: breath; animation-duration: 0.7s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running;}
.cards { width: 770px; height: 70px; position: absolute;}
.card { width: 50px; height: 70px; float: left; position: absolute;}
/* .card:hover {background:rgba(0,0,255,1);} */
.card img { border-radius: 5px; overflow: hidden;}

.number { color: #fff; width: 150px; text-align: center; line-height: 80px; font-size: 22px; position: absolute;  top: 80px; left: 40px;} 
.userName { position: absolute; width: 150px;text-align: center; line-height: 30px; font-size: 22px; position: absolute;  top: 10px; left: 40px; color: #fff; }

.kings { width: 770px; height: 40px; position: absolute; }
.king { width: 40px; height: 40px; background:rgba(255,255,0,0.2); float: left; margin: 0 10px 0 0;}

.kings .king{ position: absolute;}



.king:hover {background:rgba(0,0,255,1);}

.rival, .user { width: 100%; height: 50%; position: absolute;left: 5px;}
.show-num { position: absolute; top: 10px; text-align: center; background: rgba(0,0,0,0.4); height: 14px; color: #fff; width: 50%; left: 25%; line-height: 16px; font-size: 16px; border:2px solid rgba(0,0,0,0.2); }
.Inventory,.message {width: 1000px; position: relative; margin: 20px auto;height: 62px;}
.Inventory {border: 1px solid #ccc; }
.buttons { width: 1000px; position: relative; margin: 10px auto;height: 30px; text-align: center;}
.button { display: inline-block; border: 1px solid #ccc; margin: 0 15px; padding: 5px 15px; border-radius: 3px; }
.button:hover { cursor: pointer; background: #666; color: #fff; border-color: #666;}

.message { color: #666; text-align: center;}


.Inventory .king { border: 1px solid #ccc; border-radius: 3px; margin: 10px 5px;}


.round { width: 0px; height: 200px; position: fixed; top: 50%; right: 50%; margin: -100px -300px 0 0; z-index: 9999; }
.round-mark { position: fixed; width: 100%; height: 100%; z-index: 9999; top: 0; left: 0;}

/* 对手部分 */
.rival { top: 0px;}
.rival .healths {top: 130px;/* transform: rotate(180deg);*/ box-shadow: -1px -1px 2px rgba(0,0,0,0.3) }
/* .rival .health { transform: rotate(180deg);} */
.rival .cards { top: 20px; left: 230px; }
/* .rival .card { transform: rotate(180deg);} */
.rival .card img {box-shadow: -1px -1px 2px rgba(0,0,0,0.3) }
.rival .kings { top: 120px; left: 230px; }
.rival .king { transform: rotate(180deg); }
.rival .number { top: 40px; }
.rival .userName { top: 160px;}
/* 自己部分 */
.user { top: 50%; }
.user .healths { top: 50px;box-shadow: 1px 1px 2px rgba(0,0,0,0.3)}
.user .cards { top: 110px; left: 230px; }
.user .card img { box-shadow: 1px 1px 2px rgba(0,0,0,0.3) }
.user .kings { top: 40px; left: 230px; }

.a {color: rgb(255, 58, 58)}